
<ul class="nav nav-tabs " role="tablist" style="margin-bottom:0;">
  @foreach($cabinetNav as $oneNav)
  <li class="nav-item">
      <a href="{{ $oneNav['url'] }}" class="nav-link {{ $oneNav['active'] }}" data-toggle="tab">{{ $oneNav['name'] }}</a>
  </li>
  @endforeach    
  <li class="nav-item pull-right header"></li>
</ul>
<div style="display:flex;">
    <div class="left" id="tabs1" >
    <ul class="nav nav-tabs nav-left flex-column" id="ul1" role="tablist">
        @foreach($pointNav as $onePointNav)
        <li class="nav-item">
            <a onclick="checkedAlias($(this))" id="{{ $onePointNav['alias'] }}" class=" nav-link {{ $onePointNav['active'] }}">{{ $onePointNav['name'] }}</a>
        </li>
        @endforeach
        <li class="nav-item pull-right header"></li>
    </ul>
  </div>

  <div class="right" style="width:89%;">
    <div class="filter-box shadow-0 card mb-0">
        
    {!! $grid->render() !!}
        
    </div>
  </div>
</div>
<script src="{{ admin_asset('echarts/echarts.min.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
    cookieName = 'tableOrChart';
    cookieValue = getCookie(cookieName);
console.log(cookieValue);
    chartDom = '<div id="echart" class="echart" style="width:100%;height:30rem;display:none;">';
    dataTableObj = $('.table.custom-data-table');
    exportBtn = $('.top.d-block > .pull-right');
    topBlock = $('.top.d-block');

    dataTableObj.parent().append(chartDom);

    var showChartBtnHtml = '<button id="toggleDiv" onclick="toggleDiv()" class="btn btn-primary btn-mini btn-outline" style="margin-right:3px"><i class="feather icon-activity"></i><span class="d-none d-sm-inline">&nbsp; 曲线</span></button>';
    var showTableBtnHtml = '<button id="toggleDiv" onclick="toggleDiv()" class="btn btn-primary btn-mini btn-outline" style="margin-right:3px"><i class="feather icon-list"></i><span class="d-none d-sm-inline">&nbsp; 记录</span></button>';
    topBlock.append(showTableBtnHtml);
    if (cookieValue && (cookieValue == 'showChart')) {
        makeChartShow();
    } else {
        makeTableShow();
    }

    chartXData = {!! $xData !!};
    chartSeriesData = {!! $series !!};
    chartLegendData = {!! $legend !!};
    initChart();
});

    function checkedAlias(obj){
        let objAlias = obj.attr('id');
        let url = "{{ URL::asset('admin/getNewHistoryUrl') }}";
        let data = {
            _token: '{{ csrf_token() }}',
            currentUrl: '{{ $url }}',
            alias: objAlias
        }
        $.ajax({
            type : "POST",
            url : url,
            data : data,
            success : function(result) {
                var query = window.location.search.substring(1);
                console.log(query);
                if (result.code) {
                    if (query) {
                        window.location.href=result.data.url+'?'+query
                    }else {
                        window.location.href=result.data.url;
                    }
                }
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                layer.close(e);
                console.log(e.status);
                console.log(e.responseText);
            }
        });
        return;
    }
    function toggleDiv(){
        if (dataTableObj.is(":hidden")) {
            makeTableShow();
        } else {
            makeChartShow();
        }
    }
    function makeChartShow(){
        dataTableObj.hide();
        $('#echart').show();
        exportBtn.hide();
        $('#toggleDiv').html('<i class="feather icon-list"></i><span class="d-none d-sm-inline">&nbsp; 记录</span>');
        setCookie(cookieName, 'showChart');
    }
    function makeTableShow(){
        dataTableObj.show();
        $('#echart').hide();
        exportBtn.show();
        $('#toggleDiv').html('<i class="feather icon-activity"></i><span class="d-none d-sm-inline">&nbsp; 曲线</span>');
        setCookie(cookieName, 'showTable');
    }
    function initChart(){
        let  myCharts=document.getElementById('echart');
        myCharts.style.width=window.innerWidth*0.75+ 'px';
        var myChart = echarts.init(document.getElementById('echart'));
        var option;

        option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: chartLegendData
            },
            xAxis: {
                type: 'category',
                data: chartXData
            },
            yAxis: {
                type: 'value'
            },
            series: chartSeriesData,
            dataZoom: []
        };

        option && myChart.setOption(option);
    }

    function setCookie(cname,cvalue){
        document.cookie = cname+"="+cvalue+"; "
    }
    function getCookie(cname){
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i].trim();
            if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
        }
        return "";
    }
</script>
